<template>
  <view class="container">
    <view class="form">
      <view class="form-item">
        <text>店铺名称</text>
        <input type="text" placeholder="请输入" v-model="form.storeName" />
      </view>
      <!-- 所在地区 -->
      <u-form-item
          required
          label-width="150"
          :border-bottom="false"
          prop="villageCity"
          label="所在地区"
      >
        <div @click="showPicker()" style="margin-right: 30rpx;">选择</div>
        <u-input
            v-model="form.villageCity"
        />
      </u-form-item>

      <view class="form-item">
        <text>店铺位置</text>
        <picker mode="region" @change="onRegionChange">
          <view class="picker">{{ form.region || '请选择' }}</view>
        </picker>
      </view>
      <view class="form-item">
        <text>店铺面积</text>
        <input type="number" placeholder="请输入 m" v-model="form.storeArea" />
      </view>
      <view class="form-item">
        <text>店铺类型</text>
        <picker :range="storeTypes" v-model="form.storeTypeIndex">
          <view class="picker">{{ storeTypes[form.storeTypeIndex] || '请选择' }}</view>
        </picker>
      </view>
      <view class="form-item">
        <text>店长姓名</text>
        <input type="text" placeholder="请输入" v-model="form.managerName" />
      </view>
      <view class="form-item">
        <text>联系方式</text>
        <input type="text" placeholder="请输入" v-model="form.contact" />
      </view>
      <view class="form-item">
        <text>营业时间</text>
        <picker mode="time" v-model="form.businessTime">
          <view class="picker">{{ form.businessTime || '请选择' }}</view>
        </picker>
      </view>
      <view class="form-item">
        <text>营业执照上传</text>
        <view class="upload">
          <text>请上传营业执照</text>
          <button @click="uploadLicense">上传</button>
        </view>
      </view>
    </view>
    <view class="agreement">
      <checkbox v-model="form.agreed" /> 我已阅读并接受《个人信息处理说明协议》
    </view>
    <button class="submit" @click="submitForm">上架店铺</button>

    <m-city
        :provinceData="list"
        headTitle="区域选择"
        ref="cityPicker"
        @funcValue="getPickerParentValue"
        pickerSize="4"
    >
    </m-city>


  </view>
</template>

<script>
export default {
  name:"addStore",
  data() {
    return {
      form: {
        storeName: '',
        region: '',
        storeArea: '',
        storeTypeIndex: 0,
        managerName: '',
        contact: '',
        businessTime: '',
        licenseUrl: '',
        agreed: false,
        villageCity
      },
      storeTypes: ['餐饮', '服装', '电子产品', '超市'],
      licenseUrl: '',
      list: [
        {
          id: "",
          localName: "请选择",
          children: [],
        },
      ],
    };
  },
  methods: {
    getPickerParentValue(e) {

      // 检查 model 是否为空，若为空则初始化
      if (!this.form) {
        this.form = {};
      }
     // this.model.storeAddressIdPath = [];
      console.log(e)
      let name = "";
      e.forEach((item, index) => {
        if (item.id) {
          // 遍历数据
        //  this.model.storeAddressIdPath.push(item.id);
          if (index == e.length - 1) {
            name += item.localName;
          } else {
            name += item.localName + ",";
          }
          this.form.villageCity = name
          alert(name);
         // this.$set(this.model, 'villageCity', name)
        }
      });

      // this.form.storeCenter = e[e.length-1].center
    },
    // 显示三级地址联动
    showPicker() {
      this.$refs.cityPicker.show();
    },
    onRegionChange(e) {
      this.form.region = e.detail.value;
    },
    uploadLicense() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.form.licenseUrl = res.tempFilePaths[0];
        }
      });
    },
    submitForm() {
      if (!this.form.agreed) {
        uni.showToast({
          title: '请同意协议',
          icon: 'none'
        });
        return;
      }
      // 提交表单逻辑
      console.log(this.form);
      uni.showToast({
        title: '店铺上架成功',
        icon: 'success'
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.form {
  margin-bottom: 20px;
}

.form-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.form-item text {
  width: 80px;
  font-weight: bold;
}

.form-item input,
.form-item picker {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.upload text {
  color: #888;
}

.agreement {
  margin-bottom: 20px;
}

.submit {
  width: 100%;
 // padding: 15px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
}
</style>